<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
</head>
<body>
    <header>
        <div class="box">
            <ul>
                <li class="li01">这是li01</li>
                <li>这是li02</li>
                <li>这是li03</li>
                <li>这是li04</li>
                <li class="li05">这是li05</li>
            </ul>
        </div>
        <ul>
            <li class="li666">lili01</li>
            <li>lili02</li>
            <li>lili03</li>
            <li>lili04</li>
            <li class="li888">lili05</li>
        </ul>
    </header>
    <script>
        // 找到.box的后代元素li
        // $(".box").find("li").css({
        //     border:"1px solid red"
        // });
        // 找到.box的直系子元素
        $(".box").children().css({
            border:"1px solid red"
        });
        $(".box").children("ul").css({
            border:"1px solid red"
        });

        // siblings() 找到 "li".2 的所有兄弟元素
        // $(".box").children("ul").children("li").eq(2).siblings().css({  // index 0 1 3 4 
        //     border:"1px solid blue"
        // })

        // next()找 "li".2 的下一个兄弟
        // $(".box").children("ul").children("li").eq(2).next().css({  // index 3
        //     border:"1px solid pink"
        // })

        // nextAll() 下面的所有兄弟元素
        $(".box").children("ul").children("li").eq(2).nextAll().css({   //  index 3 4 
            border:"1px solid black"
        })

        // prev()上一个兄弟
        $(".box").children("ul").children("li").eq(2).prev().css({  //// index  1
            border:"1px solid blue"
        })

        // prevAll()和parent()后出现的覆盖会前面的
        // prevAll() 上面所有兄弟
        $(".box").children("ul").children("li").eq(2).prevAll().css({  // index 0 1
            border:"1px solid blue"
        })
        $(".box").parents().css({
            border:"1px solid red"
        })
        // parent() 找到父 标签
        $(".box").parent().css({
            border:"1px solid yellow"
        })

        // parents() 找到所有父级标签,
        
        // 找到父级标签中的谁
        // $(".box").parents("body").css({
        //     border:"2px solid black"
        // })

    </script>
</body>
</html>